<template>
    <div class="list-detail-box" v-loading="loading">
        <el-form
            :model="detail"
            :rules="rules"
            ref="detail"
            :hide-required-asterisk="true"
            label-width="80px">
                <el-form-item label="榜单" prop="title" class="input-no-border-box">
                    <el-input v-model.trim="detail.title" ></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="categories">
                    <el-select
                        v-model="detail.categories"
                        multiple
                        placeholder="排序类型">
                        <el-option
                            v-for="item in sortList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="展示数" prop="title">
                    <!-- <el-input v-model.trim="detail.title"></el-input> -->
                    <!-- <el-input-number v-model="detail.num" :min="1" :max="10"></el-input-number> -->
                    <el-input-number v-model="detail.num" controls-position="right" :min="1" :max="10"></el-input-number>
                </el-form-item>
        </el-form>

        <div class="list-detail-title">排行榜</div>
        <el-table
            :data="detail.list"
            border
            style="width: 100%">
            <el-table-column
                prop="gameid"
                label="当前排序">
            </el-table-column>
            <el-table-column
                prop="gameid"
                label="系统排序">
            </el-table-column>
            <el-table-column
                prop="gameid"
                label="游戏id">
            </el-table-column>
            <el-table-column
                prop="gameid"
                label="游戏icon">
            </el-table-column>
            <el-table-column
                prop="gameid"
                label="游戏名称">
            </el-table-column>
            <el-table-column
                prop="gameid"
                label="评分">
            </el-table-column>
            <el-table-column
                prop="gameid"
                label="标题">
            </el-table-column>
            <el-table-column
                prop="gameid"
                label="类型">
            </el-table-column>
            <el-table-column
                prop="address"
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                    <div><el-button @click="delItem(scope.row)" type="text" size="small">删除</el-button></div>
                    <div><el-button @click="resetItem(scope.row)" type="text" size="small">重置</el-button></div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            detail: {
                list: []
            },
            rules: {}, // 校验规则
            sortList: [
                { name: '下载榜', id: 1 },
                { name: '新品榜', id: 2 },
                { name: '服务器配置', id: 3 }
            ]
        }
    },

    methods: {
        // 删除
        delItem (item) {

        },

        // 重置
        resetItem (item) {

        }
    }
}
</script>

<style lang="scss" scoped>
    .list-detail-box {
        .list-detail-title {
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            text-align: right;
            width: 80px;
            padding-right: 12px;
        }
    }
</style>
